<template>
  <div>
    <div v-if="!tagType">
      <el-tag class="tag" type="success" v-for="item in tagsArr" :key="item">{{
        item
      }}</el-tag>
    </div>
    <div v-else class="select-tag-box">
      <div class="title">请选择标签:</div>
      <el-checkbox-group v-model="selectTagList">
        <el-checkbox
          v-for="item in totalTag"
          :key="item.id"
          :label="item.name"
        />
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
import { computed } from "vue";
export default {
  name: "TagsWrapper",
  props: {
    tags: String,
    tagType: {
      default: () => 0,
    },
    selectTag: Array,
    totalTag: Array,
  },
  setup(props, { emit }) {
    const tagsArr = computed(() => {
      if (props.tags == undefined) return;
      return props.tags.split(",");
    });
    const selectTagList = computed({
      get: () => props.selectTag,
      set: (value) => emit("changeSelectTag", value),
    });
    const createBlogSuccess = () => {
      emit("changeSelectTag", []);
    };
    return {
      tagsArr,
      selectTagList,
      createBlogSuccess,
    };
  },
};
</script>

<style scoped lang="scss">
.tag {
  margin-left: 5px;
  &:first-of-type {
    margin-left: 0;
  }
  // margin-left: 1rem;
}
.select-tag-box {
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 20px;
  .title {
    margin-bottom: 15px;
  }
}
</style>
